import { Card as AntdCard, CardProps } from 'antd';

/**
 * 导出卡片组件
 * @param {CardProps} props - 卡片组件的属性
 * @param {React.ReactNode} props.children - 卡片内容
 * @param {React.ReactNode} props.title - 卡片标题
 * @param {React.ReactNode} props.extra - 卡片右上角的操作区域
 * @param {boolean} props.bordered - 是否有边框
 * @param {React.ReactNode} props.cover - 卡片封面
 * @param {boolean} props.hoverable - 鼠标移过时可浮起
 * @param {boolean} props.loading - 当卡片内容还在加载中时，可以用 loading 展示一个占位
 * @param {'default' | 'small'} props.size - card 的尺寸
 * @param {string} props.type - 卡片类型，可设置为 inner 或 不设置
 * @param {Array<React.ReactNode>} props.actions - 卡片操作组，位置在卡片底部
 * @param {React.CSSProperties} props.bodyStyle - 内容区域自定义样式
 * @param {React.CSSProperties} props.headStyle - 自定义标题区域样式
 * @returns {JSX.Element} 卡片组件的 JSX 元素
 * @description 卡片组件是 Ant Design 提供的通用卡片容器，可承载文字、列表、图片、段落等内容。
 * @example
 * <Card title="Card title">
 *   <p>Card content</p>
 * </Card>
 * @example
 * <Card
 *   hoverable
 *   style={{ width: 240 }}
 *   cover={<img alt="example" src="https://example.com/image.jpg" />}
 * >
 *   <Card.Meta title="Europe Street beat" description="www.instagram.com" />
 * </Card>
 * @example
 * <Card
 *   title="Card title"
 *   extra={<a href="#">More</a>}
 *   style={{ width: 300 }}
 * >
 *   <p>Card content</p>
 * </Card>
 */
export const Card = (props: CardProps) => {
  return <AntdCard {...props} />;
};

// 默认导出
export default Card;

// 重新导出类型
export type { CardProps };
